Using Firebase in a Vue App Vuefire — Sorting, Filtering, and Updating

The Vuefire library lets us add Firebase database manipulation capabilities right from our Vue app.

In this article, we’ll look at how to use Vuefire to add support for Cloud Firestore database manipulation into our Vue app.

Sorting

We can sort the documents we’re querying with the orderBy method.

For example, we can write:

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  firestore: {
    books: db.collection("books").orderBy("title")
  }
};
</script>

db.js

import firebase from "firebase/app";
import "firebase/firestore";
export const db = firebase
  .initializeApp({ projectId: "project-id" })
  .firestore();
const { Timestamp, GeoPoint } = firebase.firestore;
export { Timestamp, GeoPoint };

We just call the orderBy with the key that we want to sort by to sort the query results.

Also, we can sort results returned by this.$bind :

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    this.$bind("books", db.collection("books").orderBy("title"));
  }
};
</script>

Filtering Results

We can filter results with the where method.

For example, we can write:

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    this.$bind(
      "books",
      db
        .collection("books")
        .where("wordCount", ">", 200)
        .orderBy("wordCount")
    );
  }
};
</script>

to get all the books entries that have wordCount bigger than 200.

Writing to the Database

We can use the Firebase SDK to write data to the database.

For example, if we want to update an existing entry, we can write:

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
    <button @click="update">update book</button>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    this.$bind("books", db.collection("books"));
  },
  methods: {
    update() {
      const [book] = this.books;
      const bookCopy = { ...book, title: "baz" };
      db.collection("books")
        .doc(book.id)
        .set(bookCopy)
        .then(() => {
          console.log("book updated");
        });
    }
  }
};
</script>

We added the update method to update our book.

In the method, we get the books entry that we want to update.

Then we make a copy of it and add the data we want to it.

And then we get the document we want to update to bookCopy with with the doc method.

The set method sets the document to the new content.

Then the then callback is called after the update is done.

Also, we can use the this.$fireStoreRefs method to get the document we want and update it.

For example, we can write:

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
    <button @click="update">update book</button>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      book: {},
      books: []
    };
  },
  mounted() {
    this.$bind("book", db.collection("books").doc("Cbk7fgYR75xRFkiqq5Qw"));
    this.$bind("books", db.collection("books"));
  },
  methods: {
    update() {
      this.$firestoreRefs.book.update({ title: "qux" }).then(() => {
        console.log("book updated!");
      });
    }
  }
};
</script>

We bound the this.book state to a document with in the books collection.

Then in the update method, we called this.$firestoreRefs.book.update to update book entry with the given ID with the new title value.

And then this should show in the template.

Conclusion

We can sort, filter, and update collections and documents in our Firebase database with Vuefire.